<template>
    <div id="ProgressBar">
       <p>透明度:{{val}}%</p>
       <el-slider v-model="val" :show-tooltip="false" ref="ProgressBar" @change="change"></el-slider>
    </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
props:['color','value','name'],
    data() {
        return {
            val:0,
        }
    },
  methods: {
    change(val){
        this.$emit('select',{name:this.name,Opacity:val})
        this.val=val
    },
    init(){
        this.val=parseInt(this.value)
    }
  },
  created(){
      this.init()
  },
  watch:{
    value(){
        this.init()
    }
  }
};
</script>
<style lang="less" scoped>
    #ProgressBar{
         width: 100%;
    }

 :deep(.el-slider__bar){
    background-color: var(--GeneralBackColor);
}
:deep(el-slider__button){
    z-index: 2;
}

</style>